<!DOCTYPE html>  
<html lang="zh-CN">  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>动漫网站 - 首页</title>  
    <link rel="stylesheet" href="styles.css"> <!-- 引入CSS样式表 -->  
</head>  
<style>
    /* 样式表：styles.css */  
  
/* 清除默认的列表样式 */  
nav ul {  
    list-style-type: none;  
    padding: 0;  
    margin: 0;  
    overflow: hidden; /* 防止内容溢出容器 */  
    background-color: #333; /* 导航栏背景色 */  
}  
  
/* 导航栏中的链接 */  
nav ul li {  
    float: left; /* 让列表项浮动以水平排列 */  
}  
  
nav ul li a {  
    display: block; /* 将链接转换为块级元素以填充整个列表项空间 */  
    color: white; /* 链接文字颜色 */  
    text-align: center; /* 文字居中 */  
    padding: 50px 80px; /* 内边距 */  
    text-decoration: none; /* 去除下划线 */ 
    font-size: 40px; 
}  
  
/* 链接的鼠标悬停效果 */  
nav ul li a:hover {  
    background-color: #111; /* 鼠标悬停时的背景色 */  
}  
  
/* 头部区域 */  
header {  
    display: flex; /* 使用Flexbox布局 */  
    flex-direction: column; /* 垂直方向排列子元素 */  
    align-items: center; /* 子元素在交叉轴上居中（这里是水平居中） */  
    justify-content: space-between; /* 子元素在主轴上分布 */  
    padding: 20px; /* 内边距 */  
    background-color: #f2f2f2; /* 背景色 */  
}  
  
header h1 {  
    color: #333; /* 标题文字颜色 */  
    text-align: center; /* 标题文字居中 */  
    font-size: 80px;
}  
  
header p {  
    color: #666; /* 段落文字颜色 */  
    text-align: center; /* 段落文字居中 */  
    margin-bottom: 0; /* 底部外边距为0 */  
    font-size: 20px;
}  

.image-container {  
        display: flex;  
        flex-wrap: wrap; /* 允许图片换行显示 */  
        justify-content: space-between; /* 图片之间水平间距 */  
    }  

    .image-item {  
        display: flex;  
        flex-direction: column;  
        align-items: center;  
        margin-bottom: 20px; /* 图片之间的垂直间距 */  
    }  
    .image-item h3 {  
        text-align: center; /* 标题居中 */  
        margin-top: 10px; /* 标题上方的间距 */  
    }  
    .container {  
        display: flex;  
        align-items: center; /* 垂直居中 */  
    }  
    .big-image {  
        margin-right: 200px; /* 与右边的小图片和文字之间的间距 */  
    }  
    .small-image {  
        max-width: 200px; /* 设置小图片的最大宽度 */  
    }  
    .text {  
        
    }  
/* 其他可能的样式，如响应式布局等 */  
/* ... */
</style>

<body>  
  
<!-- 头部区域 -->  
<header>  
    <nav>  
        <ul>  
            <li><a href="#">首页</a></li>  
            <li><a href="#anime-list">动漫列表</a></li>  
            <li><a href="fenlei.html">分类</a></li>  
            <li><a href="gengxin.html">最近更新</a></li>  
            <li><a href="#">注册</a></li>  
            <li><a href="#">登录</a></li>  
            <li><a href="#">搜索</a></li>  
            <li><a href="#">浏览记录</a></li>  
            <li><a href="#news">新闻</a></li>  
            <li><a href="#contact">联系我们</a></li>  
        </ul>  
    </nav>  
    <h1>欢迎来到动漫世界</h1>  
    <p>这里是你的动漫网站首页。</p>  
</header>  
  
<!-- 轮播图或横幅广告 -->  
<section id="banner">  
    <div class="image-container">  
        <div class="image-item"> 
          <img src="https://tse3-mm.cn.bing.net/th/id/OIP-C.8MSNFJOjjg71o9qw1OdjCgAAAA?rs=1&pid=ImgDetMain" width="700" height="400" alt="动漫网站横幅">
          <h3>海贼王</h3>
        </div>
        <div class="image-item"> 
          <img src="https://tse2-mm.cn.bing.net/th/id/OIP-C.OkeLmJgXZfjN4Nj3BUHAcQHaEc?w=305&h=183&c=7&r=0&o=5&dpr=1.5&pid=1.7" width="700" height="400" alt="动漫网站横幅">
          <h3>火影忍者</h3>
        </div>
        <div class="image-item"> 
            <img src="https://tse1-mm.cn.bing.net/th/id/OIP-C.Bj9aUvljxXcRC2X7dVXyEgHaEK?w=317&h=180&c=7&r=0&o=5&dpr=1.5&pid=1.7" width="700" height="400" alt="动漫网站横幅">
            <h3>怪盗基德</h3>
          </div>
          <div class="image-item"> 
            <img src="https://tse2-mm.cn.bing.net/th/id/OIP-C.FVU7OLuFDtz8qr2VOx3D2QHaFD?w=238&h=180&c=7&r=0&o=5&dpr=1.5&pid=1.7" width="700" height="400" alt="动漫网站横幅">
            <h3>无职转生</h3>
          </div>
          <div class="image-item"> 
            <img src="https://tse4-mm.cn.bing.net/th/id/OIP-C.d_SxNc5C_q2ZnHxvzzZDKQHaEn?w=270&h=180&c=7&r=0&o=5&dpr=1.5&pid=1.7" width="700" height="400" alt="动漫网站横幅">
            <h3>镇魂街</h3>
          </div>
          <div class="image-item"> 
            <img src="https://tse4-mm.cn.bing.net/th/id/OIP-C.HUThhJivhhcpHbSwZOFKHQHaEK?w=197&h=111&c=7&r=0&o=5&dpr=1.5&pid=1.7" width="700" height="400" alt="动漫网站横幅">
            <h3>斗破苍穹</h3>
          </div>
          <div class="image-item"> 
            <img src="https://tse4-mm.cn.bing.net/th/id/OIP-C.iyEk2PQFD4dHQ60-ZV4yugHaEK?w=273&h=180&c=7&r=0&o=5&dpr=1.5&pid=1.7" width="700" height="400" alt="动漫网站横幅">
            <h3>你的名字</h3>
          </div>
          <div class="image-item"> 
            <img src="https://tse3-mm.cn.bing.net/th/id/OIP-C.nJo465uxV2x2-j__PlvgPwHaF7?w=196&h=181&c=7&r=0&o=5&dpr=1.5&pid=1.7" width="700" height="400" alt="动漫网站横幅">
            <h3>天气之子</h3>
          </div>
          <div class="image-item"> 
            <img src="https://tse4-mm.cn.bing.net/th/id/OIP-C.5plDxpsSTJFrteeIy_qNNQHaEK?w=197&h=111&c=7&r=0&o=5&dpr=1.5&pid=1.7" width="700" height="400" alt="动漫网站横幅">
            <h3>一人之下</h3>
          </div>
          <div class="image-item"> 
            <img src="https://tse2-mm.cn.bing.net/th/id/OIP-C.95tuWTAWjkHyDNW037QItgHaFV?w=232&h=180&c=7&r=0&o=5&dpr=1.5&pid=1.7" width="700" height="400" alt="动漫网站横幅">
            <h3>花园宝宝</h3>
          </div>
          <div class="image-item"> 
            <img src="https://tse4-mm.cn.bing.net/th/id/OIP-C.jggG3xBKUud9XVbIvdSdygHaEo?w=273&h=180&c=7&r=0&o=5&dpr=1.5&pid=1.7" width="700" height="400" alt="动漫网站横幅">
            <h3>熊出没</h3>
          </div>
          <div class="image-item"> 
            <img src="https://tse3-mm.cn.bing.net/th/id/OIP-C.Uh_rGAGh82iTXGRYuo-xMAHaFP?w=197&h=139&c=7&r=0&o=5&dpr=1.5&pid=1.7" width="700" height="400" alt="动漫网站横幅">
            <h3>鬼灭之刃</h3>
          </div>
        <!-- 重复以上结构以添加更多图片 -->  
    </div>  
</section> 
<!-- 动漫列表 -->  
  
<section id="anime-list">  
    <h2>热门动漫推荐</h2>  
    <div class="anime-item"> 
        <div class="container">  
            <img src="https://tse4-mm.cn.bing.net/th/id/OIP-C.9de8bS-aUNJT27_NQAbyTAHaEK?w=299&h=180&c=7&r=0&o=5&dpr=1.5&pid=1.7" width="600" height="400" alt="大图片" class="big-image">
            <div>  
                <img src="https://tse1-mm.cn.bing.net/th/id/OIP-C.C11hat2fYN-Qf3o-mrAm4QHaHa?w=207&h=207&c=7&r=0&o=5&dpr=1.3&pid=1.7" alt="小图片" class="small-image">  
                <h2 class="text">《间谍过家家》是由日本漫画家远藤达哉创作的漫画作品，自2019年起在日本《少年Jump+》上连载，总销量超过1500万册，成为近年来备受欢迎的漫画之一。该作品讲述了一位名为“黄昏”的西国间谍，为了执行任务而组建了一个临时家庭，其中包括身为杀手的妻子约尔和拥有读心术超能力的女儿阿尼亚。三人各怀秘密，在互相隐瞒真实身份的同时，却逐渐产生了真实的情感羁绊。这部作品以其独特的设定、丰富的角色塑造和精彩的剧情，赢得了广大观众的喜爱。</h2>  
            </div>  
        </div>
        <div class="anime-item"> 
        <div class="container">  
                <img src="https://tse3-mm.cn.bing.net/th/id/OIP-C.zDYYB6UrtaKR7QobyidPWwHaE8?w=197&h=131&c=7&r=0&o=5&dpr=1.5&pid=1.7" width="600" height="400" alt="大图片" class="big-image">
                <div>  
                    <img src="https://tse3-mm.cn.bing.net/th/id/OIP-C.-VOujtPHOYgO_WEp9jb26AHaHa?w=182&h=182&c=7&r=0&o=5&dpr=1.3&pid=1.7" alt="小图片" class="small-image">  
                    <h2 class="text">《咒术回战》是一部以奇幻、惊悚为主题的日本动画作品，讲述了在一个充满咒术与妖怪的世界中，主人公虎杖悠仁的冒险故事。悠仁原本是一名普通高中生，因意外卷入与妖怪的斗争，而加入东京都立咒术高等专门学校学习咒术。故事以悠仁在学校与其他学生一起对抗各种妖怪和强大咒术师的战斗为主线，同时展现了友情、成长、牺牲等主题。在这个充满危险与挑战的世界里，悠仁与伙伴们不断战斗，努力保护人类世界，同时也探寻着自身命运的秘密。</h2>  
                </div>  
        </div>  
        <div class="anime-item"> 
            <div class="container">  
                    <img src="https://tse4-mm.cn.bing.net/th/id/OIP-C.HYDZVdB69ktalduE-_Za6QHaEo?w=195&h=122&c=7&r=0&o=5&dpr=1.3&pid=1.7" width="600" height="400" alt="大图片" class="big-image">
                    <div>  
                        <img src="https://tse4-mm.cn.bing.net/th/id/OIP-C.adAaspVtMYxL3oj3vZMGLAHaHP?w=195&h=191&c=7&r=0&o=5&dpr=1.3&pid=1.7" alt="小图片" class="small-image">  
                        <h2 class="text">《鬼灭之刃》是一部改编自吾峠呼世晴同名漫画的热血战斗动画，背景设定在日本大正时期。故事讲述了主人公炭治郎，一个原本平凡的卖炭少年，在家人惨遭恶鬼杀害、妹妹祢豆子异变成鬼后，立志成为鬼杀队的一员，以讨伐恶鬼、为家人复仇，并寻找将妹妹变回人类的方法。炭治郎在猎鬼人的指引下，踏上了充满艰辛与危险的征途，与同伴们一同斩妖除魔，展开了一场场惊心动魄的战斗。该动画以其丰富的剧情、紧张刺激的战斗场面和深刻的人物塑造，赢得了广大观众的喜爱。</h2>  
                    </div>  
            </div>          

    <!-- 更多的动漫项... -->  
</section>  
  
<!-- 新闻或文章区域 -->  
<section id="news">  
    <h2>最新动漫新闻</h2>  
    <article>  
        <h3>1.中国动画在国际上获得认可</h3>  
        <p>
            《天天成长记》和《斗破苍穹》等作品在2024年法国昂纳西国际动画节上亮相，并入选中国优秀动画作品推介会，展示了中国动画的独特魅力和文化底蕴。
            《斗破苍穹》动画改编自阅文集团旗下同名小说，拥有庞大的粉丝基础，已成为兼具流量和口碑的超级IP。</p>  
    </article>  
    <article>  
        <h3>2.动画作品的商业推广与授权</h3>  
        <p>
            阅文集团收购了中国领先的动漫综合平台腾讯动漫，旨在进一步提高IP一体化开发的效率与成功率。
            经典国漫作品如《狐妖小红娘》和《一人之下》经过多轮开发，已成为国民IP，涵盖了动漫、影视、游戏等多个领域。</p>  
    </article>  
    <!-- 更多的新闻项... -->  
</section>  
  
<!-- 底部区域 -->  
<footer>  
    <p>版权信息 & 联系方式</p>  
</footer>  
  
</body>  
</html>